<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin:6px;
            padding:6px;
        }
        .skyblue {
            background-color: skyblue;
        }
        .green {
            background-color: green;
        }
        .cc1 {
            background-color: darkgoldenrod;
            width: 200px;
            height: 200px;
            overflow: scroll;
            float:left;
        }
        .cc2 {
            background-color:darkorange;
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="entergetprompt" @keyup="showInfo1">
        <!-- keyup事件按键enter的别名 -->
        <input type="text" placeholder="enter" @keyup.enter="showInfo2">
        <!-- keyup事件按键backspace和按键delete的别名 -->
        <input type="text" placeholder="delete" @keyup.delete="showInfo2">
        <!-- keyup事件按键esc的别名 -->
        <input type="text" placeholder="esc" @keyup.esc="showInfo2">
        <!-- keyup事件按键space的别名 -->
        <input type="text" placeholder="space" @keyup.space="showInfo2">
        <!-- keyup事件按键up的别名 -->
        <input type="text" placeholder="up" @keyup.up="showInfo2">
        <!-- keyup事件按键down的别名 -->
        <input type="text" placeholder="down" @keyup.down="showInfo2">
        <!-- keyup事件按键left的别名 -->
        <input type="text" placeholder="left" @keyup.left="showInfo2">
        <!-- keyup事件按键right的别名 -->
        <input type="text" placeholder="right" @keyup.right="showInfo2">
        <!-- keydown事件按键tab的别名(特殊，必须结合keydown去使用) -->
        <input type="text" placeholder="tab" @keydown.tab="showInfo2">
        <!-- keyup事件除了上面的按键的别名的写法要用小写加横杠的写法如caps-lock的别名来写按键CapsLock -->
        <input type="text" placeholder="CapsLock" @keyup.caps-lock="showInfo2">
        <input type="text" placeholder="a" @keyup.a="showInfo2">
        <!-- keyup绑定了Ctrl和alt和a键一起按触发 -->
        <input type="text" placeholder="ctrl.alt.a" @keyup.ctrl.alt.a="showInfo2">
        <!-- keydown事件系统修饰键(特殊，keyup必须要按2个键才能触发) -->
        <input type="text" placeholder="alt up" @keyup.alt="showInfo2">
        <input type="text" placeholder="ctrl up" @keyup.ctrl="showInfo2">
        <input type="text" placeholder="shift up" @keyup.shift="showInfo2">
        <input type="text" placeholder="win键 up" @keyup.meta="showInfo2">
        <!-- keydown事件系统修饰键(特殊，keydown能触发) -->
        <input type="text" placeholder="alt down" @keydown.alt="showInfo2">
        <input type="text" placeholder="ctrl down" @keydown.ctrl="showInfo2">
        <input type="text" placeholder="shift down" @keydown.shift="showInfo2">
        <input type="text" placeholder="win键 down" @keydown.meta="showInfo2">
        <!-- keydown事件可以直接用keycode(不推荐) -->
        <input type="text" placeholder="13 down" @keydown.13="showInfo2">
        <input type="text" placeholder="13 up" @keyup.13="showInfo2">
        //自定义按键别名
        <input type="text" placeholder="huiche up" @keyup.huiche666="showInfo2">
    </div>
    <script>
        Vue.config.productionTip = false
        //自定义按键别名
        Vue.config.keyCodes.huiche666 = 13
        new Vue({
            el:'#root',
            data(){
                return{
                    name:'zzz1'
                }
            },
            methods:{
                showInfo1(e){
                    // console.log(e.target.value)
                    console.log(e.key, e.keyCode)
                    if(e.keyCode !== 13) return
                    console.log(e.key, e.keyCode)
                },
                showInfo2(e){
                    console.log(e.key, e.keyCode)
                }
            },
        })
    </script>    
</body>
</html>